<?php 
require_once '../config/share_config.php';
$config = require_once '../config/config.php';
$pages = json_decode($config['pages']);
if (isset($_GET['id'])) {
	$key = $_GET['id'];
	if (isset($shareData[$key])) {
		$data = $shareData[$key];
	}	
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>分享页面设置</title>
	<link rel="stylesheet" id="templatecss" type="text/css" href="../css/basic-grey.css">
	<link rel="stylesheet"  type="text/css" href="../css/img.css">
	<script type="text/javascript" src="../js/jquery.js"></script>
</head>
<body>

	<form action="" method="post" class="basic-grey" id="share_form">
		<center><h1>分享页面设置
			<span>Sharing Page Settings.</span>
		</h1></center>
		<center style="margin-bottom:25px;"><span class="button share_list" style="border: 1px solid #000000;padding: 5px 5px 5px 5px;">分享链接列表</span> <?php if (isset($data)):?> <span class="button share_set" style="border: 1px solid #000000;padding: 5px 5px 5px 5px;margin-left:5px;">新建分享链接</span><?php endif ?></center>
		<p></p>
		<p></p>
		<label>
			<input type="hidden" name="id" value="<?php if(isset($key)){  if (isset($data)){ echo $key;}else{} } ?>">
			<span>分享页面选择 :</span>
			<select id="page" name="page" >
			<?php foreach($pages as $value): ?>
				<option value="<?php echo $value ?>" <?php if (isset($data)) {if ($data['page'] == $value){echo 'selected';} } ?> ><?php echo $value ?></option>
			<?php endforeach ?>				
			</select>
		</label>
		<label>
			<span>分享标题 :</span>
			<textarea id="title" type="text" name="title" placeholder="分享标题" /><?php if (isset($data)) { echo $data['title'];} ?></textarea>
		</label>
		<label>
			<span>分享图片 :</span>
			<img class="img" style="width:80px;height:80px;" src="<?php if (isset($data)) { echo $data['imgUrl']; }?>">
			<input type="button" class="button checkimg" value="选择图片" />
		</label>

		<label>
			<span>分享描述 :</span>
			<textarea id="desc" name="desc" placeholder="分享内容概要"><?php if (isset($data)) { echo $data['desc'];} ?></textarea>
		</label>
		<label>
			<span>&nbsp;</span>
			<input type="button" class="button share_btn" value="提交" />
		</label>
	</form>

	<div class="pop">
		<div class="fullScreen"></div>
		<div class="floatLayer">
			<div class="nav"><span>现有图片</span></div>
			<div class="imgs">
				<ul>
				<li><img src=""></li>
				<li><img src=""></li>
				</ul>
			</div>
			<div class="img_btn">
				<span class="submit_btn">提交</span>
				<span class="upload_btn">上传</span>
				<form action="" id ="fileUpdate-form">
				    <input type="file" name="filename" id="fileUpdate-input" style="display: none" />
				</form>
			</div>
		</div>
	</div>
	
<script type="text/javascript">
	var imgUrl = null;var html = null;
	var fileUpdate_input = document.getElementById("fileUpdate-input");
	var fileUpdate_form = document.getElementById("fileUpdate-form");
	//选择图片从服务器获取图片
	$('.checkimg').click(function(){	
		$.ajax({
			url:'../control.php?act=getImgs',
			dataType:"json",   //返回格式为json
			async:true,//请求是否异步，默认为异步，这也是ajax重要特性
			type:"GET",
			success:function(data){ 
				html = null;			
				// console.log(data);
				for (var i = data.length - 1; i >= 0; i--) {
					if (html) {
						html += '<li><img  src="'+data[i]+'"></li>';
					}else{
						html = '<li><img  src="'+data[i]+'"></li>';
					}
				     					
				}
				$('.imgs ul').html(html);
				$('.pop').css('display','block');

			}
		})
	});
	//提交分享页表单
	$('.share_btn').click(function(){		
		var imgurl = $('.img').attr('src');
		var params =$('#share_form').serialize()+'&imgurl='+imgurl;

		$.ajax({
			url: '../control.php?act=share',
			type: 'POST',
			data: params,
			dataType: 'json',
			success: function(data){
				if (data.code != 0) {
					alert(data.msg);
					setTimeout(window.location.href = data.url,3000);
				}else{
					alert(data.msg);
				}
			}
		});
	});
	//选取图片
	$("ul li img").live('click',function () {
		$("ul li img").removeClass("selected");
		// console.log($(this).attr('src'));
		imgUrl = $(this).attr('src');
		$(this).addClass("selected");
	});
	//确认选择一张图片有分享图片
	$('.submit_btn').click(function(){
		// console.log(imgUrl);
		$('.img').attr('src',imgUrl);
		$('.pop').hide();
	});
	//上传图片按钮事件
	$('.upload_btn').click(function(){
		 fileUpdate_input.click();
	});

	$('.share_list').click(function(){
		window.location.href = "./sharelist.php";
	});

	$('.share_set').click(function(){
		window.location.replace("./share_set.php");
	});
	//上传选择图片后自动上传
	fileUpdate_input.onchange = function () {
		var fileArray = document.getElementById('fileUpdate-input').files[0];
		// console.log(fileArray);
		var formData = new FormData();
		formData.append("file", fileArray);
		$.ajax({
			url: "../control.php?act=upload",//传向后台服务器文件
			type: 'POST', //传递方法
			data: formData, //传递的数据
			dataType : 'json', //传递数据的格式
			async:true, //这是重要的一步，防止重复提交的     
			cache: false, //设置为false，上传文件不需要缓存。
			contentType: false,//设置为false,因为是构造的FormData对象,所以这里设置为false。
			processData: false,//设置为false,因为data值是FormData对象，不需要对数据做处理。
			success: function (responseStr){
				if(responseStr.code != 0){
					alert(responseStr.msg);//上传成功
					// console.log(responseStr);
					imgUrl = responseStr.imgUrl;
					$("ul li img").removeClass("selected");
					$('.imgs ul').append('<li><img class="selected" src="'+responseStr.imgUrl+'"></li>');
				}else{
					alert(responseStr.msg);//上传失败
				}
			},
			error: function () {
				alert("上传错误！");
			}
		});
	}

</script>
</body>
</html>